JSConfJP2019 day1
from JSConfJP2019のmemo
一度復習したが、さらに復習が必要なものは「#WIP」を付けといたmrsekut.icon
The State of JavaScript - Raphaël Benitte and Sacha Greif
ライブラリ、フレームワーク、AltJSの利用状況などのアンケート結果の紹介
The 2019 State of JavaScript Survey
今年のSurvey
誰でも参加できる
The State of JavaScript 2018: JavaScript Flavors - Overview
去年のやつの結果が見れる
The State of CSS 2019
CSS版
https://gyazo.com/1d9de5957830224ab730cade055e7473
ElmもReasonも認知度がそもそも低く、触ったことがある人は数%しかいない
グラフは下から
赤: 触ったことがあるし、今後も触りたい
橙: 触ったことがあるが、今後は触るつもりはない
青: 聞いたことがあり興味がある
水: 聞いたことはあるが興味はない
灰: 聞いたことがない
ちなみにTSは60%ぐらいが「使ったことがある」ref
フレームワークではReactはぶっちぎり ref
Gatsby, Next ref
ビジュアル的なスライドがすごかった
英語はゆっくり話してくれてたのでまだ聞き取れた
このサーベイの内容は毎年誰かがQiitaにあげてるのを見たことがあるので2019年版もそれ見ようかなmrsekut.icon
JavaScript AST programming: Introduction and beyond - Takuto Wada
t_wadaさんのJSのASTをいじる話
JSコードからASTを抽出(parser)→ASTをいじる(traverse)→ASTをJSコードに戻す(unparser)
感想
何に使えるのかが知りたかった
テストとかかな、ライブラリ作成か、なんの?
power-assert-js
t_wada氏らが開発
内部はASTを使いまくりらしい
Jamie Zawinski
ネットスケープ作った人
https://gyazo.com/df95d32d082e2458442088d45b45cccc
grepは文字列を扱う
コメントかどうかの判断できない
bananaのネタのやつをASTでみてみると
b+a+(+a)+aになっていることがわかる
↑intにしようとして無理なのでNaNになる
JSのASTを触るに移したmrsekut.icon
Defining Open Source - Henry Zhu | JSConf JP
発表射はBabelのメインメンテナ
OSSを使っているエンジニアは99%を超える
OSSを仕事とするのは難しい
なんでOSSをするのか?
→coolだから
お金の話
OSSは当たり前ではない
当たり前となって強い言葉を使ったissueが立つこともある
Open source is lens thorugh which I see the world
Open Source as a Mirror
Wrap-up: Runtime-friendly JavaScript - Sho Miyamoto | JSConf JP
High Performance JavaScript - Google スライド
勉強不足すぎて全然理解できていない #WIP
@webseals
新聞社、Cを書いてる
jsのパフォーマンスの話
JavaScriptのLayerごとの最適化
product
メモ化、キャッシュ
runtime
非同期処理、code fetching
engine
inline casche
SMI/heapNumber
packed/holey
この辺わからんmrsekut.icon
micro-optimization
jsではあまりやらんでもいい
すでに速いので
runtime,engineが頑張っている
server side
IOがボトルネックになりがち
同期的なIOは避ける
parseとかは非同期には実行できない(?)
nodeのStream API
pipeとかあるのか
renderToNodeStream
Reactに16からはいった
Chrome独自にeventloopがある
https://github.com/GoogleChromeLabs/idlize
code casheing
一旦コンパイルしたもの次使うときはそれを使う、再パースしない
↑パースとコンパイル
preloading scripts
先にpreloadしてほしいものを指定しておく
link rel="preload"
fetchした時点でパースとコンパイルをする
まだ実行しないのに
だから、使われるときはあとは実行するだけの状態にできる
idling
idle until urgent
必要になるまで待て
requestIdleCallback
cancellIdeleVallback
idlelizeというライブラリがある
phillipwalton.com/articles/idle-until-urgent
How to Boost Your Code with WebAssembly - FUJI Goro / @__gfx__
JSConf JP 2019で "How to Boost Your Code with WebAssembly" という話をしました - Islands in the byte stream
wasmの話
fuji goroさん
趣味で@msgpack/msgpackを作ったときの話に基づく
CDNの会社のFastlyで働いている
ネイティブコードと言うよりはjvmっぽい
wasmはバイトコードとその処理系の仕様
emscriptenでC/C++→は2012年頃
jsでCPUのエミュレーションをする
速度感
https://gyazo.com/49a063901b79d67cf6fe8c24f689a328
class 3はclass 1の3倍遅い
クラス3のところは企業が金をつぎ込んでちゃんとしてるので速い
v8の実装にお金をかけたのでjsは他のスクリプト言語より速い
wasmは「クラス5の中では速い方」ってぐらい
クラス1には及ばない
製品の一部をwasmにしたい
扱える型が数値だけなので、小さい単位で色々やろうとすると結構辛い
ASの話かな
wasmはリトルエンディアン、jsはホストに依存するのでつらい
rustとかcのほうが楽そう、
AssemblyScriptはランタイムが小さめ
↑は文法はtsだが、書き味はC
Bynarienで最適化
repogitory
ベンチマーク
データサイズが小さいと普通のjsの速い
データサイズが大きくなるとwasmのほうが早かった
これは常に確実に
20~50%ぐらい速い
js→asのつなぎこみは大変そう
v8
-no-opt
最適化を無効にするオプション
これやってベンチマーク取るとだいぶ差がついた
Deno - A new way to JavaScript - Kitson Kelly
Deno jsconf.jp - Google スライド
ThoughtWorksの人
Denoらへんに書いた
https://gyazo.com/6c551eb08c8a8b04136cd3d1a27b4c71 https://gyazo.com/6d66283674f1c1397e70fe6962ce00ba
Make it Declarative with React - Toru Kobayashi
Make it Declarative with React - Speaker Deck
補足記事
@koba04氏の95%ぐらい英語で、ちょこちょこ日本語での補足も入った発表形式だった
宣言的UIに書いた
ReactのCustomRendererに書いた
React Fiber
後半全然わからん
#WIP
https://twitter.com/ohbarye/status/1200699822707068928
Sponcer Talk
サイボウズ
Cybozu.inc FrontEnd Expert Team - Speaker Deck
mediba
mediba におけるフロントエンド, JavaScript / mediba & JavaScript development - Speaker Deck
Predictive Prefetching for improved performance - Praveen Yedidi
Guess.js
pre-fetchとかができるやつ?
よくわからんかた..
Web Components era phase 2 - Yoshiki Shibukawa | JSConf JP
2019年はWebComponents元年(2回目)!WebComponentsをReact/Angular/Vueと一緒に使う - Qiita
渋川よしき氏の発表
今朝スケートの大会に行き、家族全員メダルをもろたらしい
自分でタグを作るやつ
昔からあった技術
Mithrilに書いた
MS HTML Component
これ?
JavaScript page components
全然ヒットしねえ、なんだこれ
https://www.webcomponents.org/
https://github.com/material-components/material-components-web-components
Web Componentsに書いた
Reactと併用できるの?
できるならいつ?
ライブラリとしてあるのか
divと同じようにそのタグで使える
Cache Me If You Can - Maxi Ferreira | JSConf JP
キャッシュ難しい問題
サービスワーカー
http
Cache-Control
CDNのきゃっしゅ
https://twitter.com/ka2jun8/status/1200721072494006272
Build tiny node.js - WASM/WASI compiler using node.js - がねこまさし
Build Node.js–WASM/WASI tiny compiler with Node.js - Speaker Deck
Node.jsでつくるNode.js-WASMコンパイラ - もくじ - Qiita
https://www.slideshare.net/mganeko/nodejsnodejs-123707037
Node.jsコンパイラのstructure
LLVMはレジスタマシン
wasmはスタックマシン
#WIP
License violation of React Applications - dynamis | JSConf JP
React License Violation - Speaker Deck
WebDINO Japan (元Mozilla Japan)
OSSの生みの親のような会社
のCTOの人@dynamitterさんの発表
ライセンスのMIT,BSDとかしらないなmrsekut.icon
terser
OSSのライセンスの本あったよなたしかmrsekut.icon
『OSSライセンスの教科書』や
誰も守ってない規約になんの意味があるんだ?
npm license checkerというライブラリがある